.component {
  position: relative;

  .searchIcon {
    color: var(--theme-staking-stake-pools-search-icon-color);
    left: 20px;
    position: absolute;
    top: 19px;
    z-index: 1;

    svg {
      height: 15px;
      opacity: 0.3;
      width: 15px;
    }
  }

  .searchIconFocus {
    svg {
      opacity: 0.7;
    }
  }

  input {
    border-radius: 4px;
    padding: 14px 58px 14px 45px;
  }

  .clearButton {
    border-radius: 3px;
    cursor: pointer;
    height: 28px;
    position: absolute;
    right: 12px;
    top: 12px;
    width: 28px;
    z-index: 1;

    &:hover {
      opacity: 0.8;
    }

    svg {
      height: 10px;
      width: 10px;

      polygon {
        fill: var(--theme-bordered-box-text-color);
      }
    }
  }
}
